'use client'
import React, { useEffect, useState } from 'react'
import { Avatar, List, Skeleton, Button } from 'antd'
import { SearchOutlined } from '@ant-design/icons'

type PaginationPosition = 'top' | 'bottom' | 'both'

type PaginationAlign = 'start' | 'center' | 'end'
interface DataType {
  gender?: string
  name: {
    title?: string
    first?: string
    last?: string
  }
  email?: string
  picture: {
    large?: string
    medium?: string
    thumbnail?: string
  }
  nat?: string
  loading: boolean
}

const count = 3
const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`

export default function AccountPage() {
  const [initLoading, setInitLoading] = useState(true)
  const [loading, setLoading] = useState(false)

  //   const [list, setList] = useState<DataType[]>([])

  const list = [
    {
      phone: '123',
      email: 'zhdao1.com',
    },
    {
      phone: '123',
      email: 'zhdao1.com',
    },
    {
      phone: '123',
      email: 'zhdao1.com',
    },
    {
      phone: '123',
      email: 'zhdao1.com',
    },
  ]

  const [position, setPosition] = useState<PaginationPosition>('bottom')
  const [align, setAlign] = useState<PaginationAlign>('center')
  useEffect(() => {
    // fetch(fakeDataUrl)
    //   .then(res => res.json())
    //   .then(res => {
    //     setInitLoading(false)
    //     setData(res.results)
    //     setList(res.results)
    //   })
  }, [])

  return (
    <div className='mx-auto max-w-[1048px] h-[100vh] flex'>
      <div className='w-[44px] sm:w-[224px] pl-4 pr-6 border-r border-divider-burn flex flex-col'>
        <div className='mt-6 mb-8 px-3 py-2 text-text-primary title-2xl-semi-bold'>设置</div>
      </div>
      <div className='relative flex w-[824px]'>
        <div className='w-full pb-4 bg-components-panel-bg overflow-y-auto'>
          <div className='sticky top-0 mx-8 pt-[27px] pb-2 mb-[18px] flex items-center bg-components-panel-bg z-20'>
            <div className='shrink-0 text-text-primary title-2xl-semi-bold'>成员</div>
            <div>
              <Button
                type='primary'
                icon={<SearchOutlined />}>
                Search
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
    // <List
    //   loading={initLoading}
    //   pagination={{ position, align }}
    //   dataSource={list}
    //   renderItem={item => (
    //     <List.Item>
    //       <Skeleton
    //         avatar
    //         title={false}
    //         loading={item.loading}
    //         active>
    //         <List.Item.Meta title={<a href='https://ant.design'>{item.name?.last}</a>} />
    //         <div
    //           className='text-center text-white scale-[0.4]'
    //           style={{}}></div>
    //         <div>content</div>
    //       </Skeleton>
    //     </List.Item>
    //   )}
    // />
  )
}
